SwiftUI直通车系列（6）—— 使用动画
本系列博客是针对SwiftUI开发框架的快速入门介绍，之前系列博客地址：
SwiftUI直通车系列（1）—— 视图的布局与组织
SwiftUI直通车系列（2）—— 列表视图
SwiftUI直通车系列三（3）—— 使用导航
SwiftUI直通车系列（4）—— 处理用户交互
SwiftUI直通车系列（5）—— 自定义绘制
前面的博客整体对使用SwiftUI进行页面布局与简单的用户交互做了介绍。我们知道，作为一个优秀的UI框架，其很重要的一点是对动画的支持，动画是提升用户体验的重要方式，在SwiftUI中，实现动画效果将变得非常容易。
一、使用属性动画
属性动画是指当组件的属性发生变化时所展示动画效果，例如组件的颜色、位置、尺寸、旋转角度等。在SwiftUI中，我们知道要动态的对组件样式进行更改，需要使用状态来控制。我们也可以使用状态来控制动画动作。
例如，我们定义一个按钮组件，当点击时，让其旋转180度，并略微放大，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| struct DrawContent:View {
@State private var begin = false
var body: some View {
VStack(alignment: .center, spacing: 20) {
Button(action: {
self.begin.toggle()
}) {
Text("开始")
.font(Font.system(size: 30))
.rotationEffect(.degrees(self.begin ? 180 : 0))
.scaleEffect(self.begin ? 2 : 1)
.animation(.easeInOut(duration: 3))
}
}
}
}
|
其中，begin状态属性用来记录动画的状态，当一次点击此按钮时，会将当前按钮放大一倍，并旋转180度，再次点击按钮会动画还原。
rotationEffect用来定义组件的旋转角度，scaleEffect用来定义组件缩放的比例，与之类似，大部分用来渲染视图样式的属性都支持进行动画。animation用来设置动画的执行方式，如上代码所示，设置的为easeInOut表示动画执行的过程采用渐入渐出的方式，且动画执行的时长为3秒。
二、使用转场动画
属性动画用在组件的某些属性发生变化的场景，转场动画会影响组件的切换动作。当对组件进行展示或隐藏时，通常可以采用转场动画来处理。我们以上一篇博客自定义的图形组件为例，我们可以为其出现时加一个滑动动画，示例代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| extension Animation {
static func custom() -> Animation {
Animation.spring(response: 1.5, dampingFraction: 0.5, blendDuration: 0.5)
.speed(2)
.delay(0.03)
}
}
struct DrawContent:View {
@State private var begin = false
var body: some View {
VStack(alignment: .center, spacing: 20) {
Button(action: {
withAnimation {
self.begin.toggle()
}
}) {
Text("开始")
.font(Font.system(size: 30))
.rotationEffect(.degrees(self.begin ? 180 : 0))
.scaleEffect(self.begin ? 2 : 1)
.animation(.easeInOut(duration: 3))
}
if self.begin {
ZStack{
ForEach(0 ..< 10) { i in
DrawTestView(angle: Angle(degrees:Double(36*i))).opacity( 0.3)
}
}.animation(.custom())
.transition(.slide)
}
}
}
}
|
如上代码所示，其中custom是我们自定义的一种动画模式，上面采用了阻尼动画，并自定义了动画的阻尼参数，速度，延时等属性。
